<template>
  <el-row>
    <el-card class="box-card">
      <el-col :span="5">
        昵称:
        <el-select v-model="nameValue" placeholder="请选择">
          <el-option v-for="(username,index) in allUserName" :key="index" :value="username"></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        系统编号:
        <el-select v-model="codeValue" placeholder="请选择">
          <el-option v-for="(code,index) in syscdoe" :key="index" :value="code"></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-button type="primary" @click="AddRoot()">确定</el-button>
      </el-col>
    </el-card>
    <br/>
    <el-card>
      <el-table border :data="allRootInfo" max-height="600" style="width: 500px">
        <el-table-column prop="SYSCODE" label="系统编号" width="100" :filters = codeScreen :filter-method="filterHandler">
        </el-table-column>
        <el-table-column prop="NICKNAME" label="权限用户昵称" :filters = nameScreen :filter-method="filterHandler">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-popconfirm title="确定要删除吗？" @onConfirm="DeleteRoot(scope.$index)">
              <el-button slot="reference" type="text" size="small">移除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-row>
</template>

<script>
export default {
  name: "AIDemoConfidence",
  data() {
    return {
      allUserName: [],
      allRootInfo: [],
      nameScreen:[],
      codeScreen:[],
      syscdoe: [],
      nameValue: '',
      codeValue: ''
    }
  },
  created() {
    this.GetAllUser()
    this.GetSyscode()
    this.GetRootInfo()
    setTimeout(() => {
      this.UpdateScreen()
    }, 300)
  },
  methods: {
    GetAllUser: function () {
      this.$axios.get('http://localhost:8099/AIDemoConfidence/GetAllUser'
      ).then(res => {
        this.allUserName = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    GetRootInfo: function () {
      this.$axios
          .get('http://localhost:8099/AIDemoConfidence/GetRootInfo')
          .then(res => {
            this.allRootInfo = res.data
          })
          .catch(err => {
            console.log(err)
          })
    },
    GetSyscode: function () {
      this.$axios
          .get('http://localhost:8099/AIDemoConfidence/GetSyscode')
          .then(res => {
            this.syscdoe = res.data
          })
          .catch(err => {
            console.log(err)
          })
    },
    UpdateScreen:function(){
      this.nameScreen.clear
      this.codeScreen.clear
      for(let i in this.allUserName){
        let t = {}
        t.text =this.allUserName[i]
        t.value=this.allUserName[i]
        this.nameScreen.push(t)
      }
      for(let i in this.syscdoe){
        let t = {}
        t.text =this.syscdoe[i]
        t.value=this.syscdoe[i]
        this.codeScreen.push(t)
      }
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    AddRoot: function () {
      let nickname = this.nameValue;
      let syscode = this.codeValue;
      let params = {"nickname": nickname, "syscode": syscode};
      this.$axios
          .post('http://localhost:8099/AIDemoConfidence/AddRoot', params)
          .then(res => {
            this.$message("新增成功")
            console.log(res.data)
          })
          .catch(err => {
            this.$message("新增失败")
            console.log(err)
          })
      setTimeout(() => {
        this.GetRootInfo()
      }, 300)
    },
    DeleteRoot(index) {
      let nickname = this.allRootInfo[index]["NICKNAME"];
      let syscode = this.allRootInfo[index]["SYSCODE"];
      let params = {"nickname": nickname, "syscode": syscode};
      this.$axios
          .post('http://localhost:8099/AIDemoConfidence/DeleteRoot', params)
          .then(res => {
            this.$message("删除成功")
            console.log(res.data)
          })
          .catch(err => {
            this.$message("删除失败")
            console.log(err)
          })
      setTimeout(() => {
        this.GetRootInfo()
      }, 300)
    }
  }
}
</script>

<style scoped>
.box-card {
  height: 80px;
}
</style>